<template>
  <div class="foodList" @click="gotoShop(data.businessId)">
    <div class="foodItem" >
      <div class="foodLeft">
        <img :src="data.businessImg"  alt=""/>
      </div>
      <div class="foodRight">
        <div class="foodName">
          <div style="width: 50vw">
            <van-text-ellipsis :content="data.businessName" />
          </div>
          <VanIcon style="margin-right: 5px" name="ellipsis"></VanIcon>
        </div>
        <div class="foodScore">
          <div class="foodScore-left">4.9分</div>
          <div class="foodScore-Mid">月售1000+</div>
          <div class="foodScore-Right">25分钟 744m</div>
        </div>
        <div class="foodPrice">
          <div class="price-left">起送￥{{ data.starPrice }}</div>
          <div class="price-mid">免配送费</div>
          <div class="cost">
            <div class="cost-logo">————</div>
            <div class="cost-top">￥{{data.deliveryPrice}}</div>
          </div>
          <div class="price-right">
            <div class="box">
              <div style="font-size: 1.8vw;color:#17BAF9;font-weight: bolder;">蜂鸟准时达</div>
            </div>
          </div>
        </div>
        <div class="foodAd1">
          <div class="foodAd1-left">
            <div class="left-logo">
              <i style="color: orange" class="fa-solid fa-fire-flame-curved "></i>
            </div>
            <div class="left-text">
              <div style="font-size: 2vw;color: rgb(252, 130, 18);font-weight: bolder;">近30日85人复购</div>
            </div>
          </div>
          <div class="foodAd1-right">
            <div style="font-size: 2vw;color: rgb(252, 130, 18);font-weight: bolder;">入会享优惠</div>
          </div>
        </div>
        <div class="foodAd2">
          <div class="foodAd2-left">
            <i style="margin-left:0.5vw;color: red" class="fa-solid fa-envelope-open-text "></i>
            <div style="margin-left:0.5vw;font-size: 2vw;color:rgb(218, 100, 73);font-weight: bolder;">14元老朋友补贴</div>
          </div>
          <div class="foodAd2-right">
            <i style="margin-left:0.5vw;color:rgb(222, 150, 83);" class="fa-solid fa-crown "></i>
            <div style="margin-left:0.5vw;font-size: 2vw;color:rgb(222, 150, 83);font-weight: bolder;">3.5元无门槛</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {BusinessInfo} from "@/api/home/type.ts";
import router from "@/router";

interface IProps {
  data: BusinessInfo
}
const props = defineProps<IProps>()

//跳转路由
const gotoShop = (id: number) => {
  router.push({
    name: 'shop',
    params: {
      id,
    },
  })
}
</script>

<style scoped>
.foodList{
  display: flex;
  margin: 5px 0;
  color: gray;
  flex-direction: column;
  align-items: center;
}
.foodList .foodItem{

  background: white;
  display:flex;
  flex-direction:row;
  width:90%;
  height: 33vw;
  margin-top: 2vw;
  border-radius:15px;
}
.foodList .foodItem .foodLeft{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex:4;
}
.foodList .foodItem .foodLeft img{
  border-radius: 15px;
  height: 28vw;
  width: 27vw;
}
.foodList .foodItem .foodRight{
  display: flex;
  flex:6;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.foodList .foodItem .foodRight .foodName{
  margin-top: 1.2vw;
  width: 100%;
  font-size: 4vw;
  font-weight: bolder;
  color: black;
  white-space: nowrap;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;

  display: flex;
  flex-direction: row;
  justify-content: center;
}
.foodList .foodItem .foodRight .foodScore{
  margin-top: 1.5vw;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.foodList .foodItem .foodRight .foodScore .foodScore-left{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8vw;
  font-size: 3vw;
  font-weight: bolder;
  color: orange;
}
.foodList .foodItem .foodRight .foodScore .foodScore-Mid{
  flex:1;
  font-size: 2.8vw;
  color: gray;
  display: flex;
  flex-direction: row;
  align-items:center;
}
.foodList .foodItem .foodRight .foodScore .foodScore-Right{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15vw;
  padding-left: 3.5vw;
  padding-right: 2.5vw;
  font-size: 2.5vw;
  color: gray;
}
.foodList .foodItem .foodRight .foodPrice{
  margin-top: 1.5vw;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.foodList .foodItem .foodRight .foodPrice .price-left{
  color: gray;
  font-size: 2vw;
}
.foodList .foodItem .foodRight .foodPrice .price-mid{
  color: orange;
  font-size: 2vw;
  margin-left: 1.5vw;
  font-weight: bolder;
}
.foodList .foodItem .foodRight .foodPrice .cost{
  width: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.foodList .foodItem .foodRight .foodPrice .cost .cost-logo{
  color: gray;
  font-size: 2vw;
  padding-left: 0.4vw;
  margin-bottom: -2.2vw;
  z-index: 99;
}
.foodList .foodItem .foodRight .foodPrice .cost .cost-top{
  color: gray;
  font-size: 2vw;
  z-index: 10;
}
.foodList .foodItem .foodRight .foodPrice .price-right{
  padding-left: 19vw;
}
.foodList .foodItem .foodRight .foodPrice .price-right .box{
  border: 1px solid gray;
  width: 10vw;
  height: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.foodList .foodItem .foodRight .foodAd1{
  margin-top: 1.5vw;
  width: 100%;
  display: flex;
  align-items: center;
}
.foodList .foodItem .foodRight .foodAd1 .foodAd1-left{
  width: 20vw;
  display: flex;
  align-items: center;
}
.foodList .foodItem .foodRight .foodAd1 .foodAd1-left .left-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 3.5vw;
  width: 10vw;
  background-color: rgb(249, 233, 206);
  border-radius: 5px;
}
.foodList .foodItem .foodRight .foodAd1 .foodAd1-left .left-text{
  margin-left: -0.8vw;
  flex: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5vw;
  background-color: rgb(252, 240, 226);
  border-radius: 5px;
}
.foodList .foodItem .foodRight .foodAd1 .foodAd1-right{
  height: 3.5vw;
  width: 10vw;
  background-color: rgb(254, 240, 227);
  border-radius: 5px;

  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1.5vw;
}
.foodList .foodItem .foodRight .foodAd2{
  margin-top: 1.5vw;
  width: 100%;
  display: flex;
  align-items: center;

}
.foodList .foodItem .foodRight .foodAd2 .foodAd2-left{
  display: flex;
  align-items: center;
  height: 3.5vw;
  width: 18vw;
  background-color: rgb(255, 236, 236);
  border-radius: 5px;
}
.foodList .foodItem .foodRight .foodAd2 .foodAd2-right{
  display: flex;
  align-items: center;
  height: 3.5vw;
  width: 15vw;
  border: 1px solid rgb(222, 150, 83);
  border-radius: 5px;
  margin-left: 1.5vw;
}
</style>